<template>
  <div>
    <br />
    <el-row>
      <el-tabs v-model="tabIndex" type="card" @tab-click="handleClick">
        <el-tab-pane label="全部" name="0"></el-tab-pane>
        <el-tab-pane label="待处理" name="1"></el-tab-pane>
        <el-tab-pane label="审批中" name="2"></el-tab-pane>
        <el-tab-pane label="实施中" name="3"></el-tab-pane>
        <el-tab-pane label="实施待确认" name="4"></el-tab-pane>
        <el-tab-pane label="已完成" name="5"></el-tab-pane>
      </el-tabs>
    </el-row>
    <div class="tableheader">
      <span class="descs">车辆配备申请审核数({{total}}个）</span>
    </div>
    <el-table
      ref="multipleTable"
      :border="true"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      :header-cell-style="{background:'#F5F7FA'}"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column label="序号">
        <template slot-scope="scope">{{ scope.row.date }}</template>
      </el-table-column>
      <el-table-column prop="applyCname" label="申请单位"></el-table-column>
      <el-table-column prop="applyReason" label="申请原因"></el-table-column>
      <el-table-column prop="pbTypeName" label="配备方式"></el-table-column>
      <el-table-column prop="person" label="申请人"></el-table-column>
      <el-table-column prop="personTel" label="申请人电话"></el-table-column>
      <el-table-column prop="createTime" label="申报时间"></el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">
          <el-button size="mini" type="danger" @click="shenhe(scope.row)">审核</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-row style="padding: 32px 16px;">
      <el-col>
        <el-pagination
          background
          layout="total, sizes, prev, pager, next, jumper"
          :page-size="CarpageSize"
          :total="Cartotal"
          :current-page="CarpageNo"
          @current-change="CarfetchData"
          @size-change="CarpageSizeChange"
        ></el-pagination>
      </el-col>
    </el-row>
    <el-dialog title="审核" :visible.sync="sh" width="80%" v-if="formData" class="adds">
      <el-form :model="ruleForm" label-width="100px" :rules="rules" ref="form">
        <el-tabs v-model="aname" type="card" @tab-click="tabClick">
          <el-tab-pane label="申请信息" name="first">
            <el-row>
              <el-col :span="3">
                <b style="float: right;">申报理由：</b>
              </el-col>
              <el-col :span="20">&nbsp;</el-col>
            </el-row>
            <br />
            <el-row>
              <el-col :span="3">
                <b style="float: right;">配备方式：</b>
              </el-col>
              <el-col :span="9">&nbsp;</el-col>
              <el-col :span="3">
                <b style="float: right;">编制类型：</b>
              </el-col>
              <el-col :span="9">&nbsp;</el-col>
            </el-row>
            <br />
            <el-row>
              <el-col :span="3">
                <b style="float: right;">车辆类型：</b>
              </el-col>
              <el-col :span="20">&nbsp;</el-col>
            </el-row>
            <br />
            <el-row>
              <el-col :span="3">
                <b style="float: right;">附件：</b>
              </el-col>
              <el-col :span="20">&nbsp;</el-col>
            </el-row>
            <br />
            <el-row>
              <el-col :span="3">
                <b style="float: right;">是否通过：</b>
              </el-col>
              <el-col :span="20">
                <el-radio-group v-model="form.resource">
                  <el-radio label="通过"></el-radio>
                  <el-radio label="不通过"></el-radio>
                </el-radio-group>
              </el-col>
            </el-row>
            <br />
            <el-row>
              <el-col :span="3">
                <b style="float: right;">说明：</b>
              </el-col>
              <el-col :span="20">
                <el-input type="textarea"></el-input>
              </el-col>
              
            </el-row>
            <br />
              <el-row>
                <el-col :sm="24"></el-col>
                <el-form-item label>
                  <el-button type="primary">提交审核</el-button>
                </el-form-item>
              </el-row>
          </el-tab-pane>
          <el-tab-pane label="单位信息" name="second"></el-tab-pane>
        </el-tabs>
      </el-form>
    </el-dialog>
  </div>
</template>
<style>
[v-cloak] {
  display: none;
}

#container {
  width: 100%;
  height: 400px;
}

@media screen and (min-width: 992px) {
  .modal-dialog {
    width: 992px;
  }
}

.el-table th {
  background-color: #f5f7fa;
}

.tableheader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px 0px;
}
.el-dialog {
  -webkit-transform: none;
  transform: none;
  left: 0;
  position: relative;
  margin: 0 auto;
  background: #eef1f6;
}

.el-dialog__body {
  background-color: white;
  margin: 0px 10px;
}

.tableheader .descs {
  height: 20px;
  padding-left: 8px;
  line-height: 22px;
  font-size: 16px;
  font-weight: 400;
  border-left: 2px solid #f54e40;
}
.eluploadwrapper {
  display: inline-block;
  margin-left: 10px;
}

.adds .upload-demo {
  height: 90px;
  width: 100%;
}

.adds .el-upload-dragger,
.adds .el-upload--text {
  height: 60px;
  width: 100%;
}
</style>
<script>
import { axios_req } from "@/api/carcommon";
export default {
  data: function() {
    return {
      tabIndex: 0,
      aname: "first",
      total: 0,
      
      tableData: [{
          applyCname:"测试单位",applyReason:"123",pbTypeName:"调剂",person:"张三",personTel:"123456",createTime:"2020-5-5"
      }],
      pageNo: 1,
      pageSize: 10,
      Cartotal: 0,
      CarpageNo: 1,
      CarpageSize: 10,
      sh: false,
      formData: [],
      ruleForm: {},
      rules: {},
      form: {
          resource: '',
        }
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    handleClick(tab, event) {
      var sign = event.target.getAttribute("id").split("-")[1];
      console.log(sign);
    },
    async fetchData(pageNo) {},
    pageSizeChange(newSize) {
      this.pageSize = newSize;
      this.pageNo = 1;
      this.fetchData();
    },
    CarpageSizeChange(newSize) {
      this.CarpageSize = newSize;
      this.CarpageNo = 1;
      this.fetchData();
    },
    async CarfetchData(pageNo) {},
    add() {},
    download() {},
    shenhe(info) {
      this.sh = true;
    },
    tabClick(tab, event) {
      console.log(tab, event);
    }
  }
};
</script>